<template>
    <div class="bom-container">
        <!-- 顶部操作栏 -->
        <div class="top-actions">
            <el-button type="primary">保存</el-button>
            <el-button>保存且新增</el-button>
            <el-button>数据暂存</el-button>
            <el-button>草稿箱</el-button>
            <el-button>导入</el-button>
            <el-button>设计</el-button>
        </div>

        <!-- 基本信息 -->
        <el-form :model="formData" label-width="120px" class="form-section">
            <h3 class="section-title">物料清单</h3>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="物料清单主题：">
                        <el-input v-model="formData.title" placeholder="请输入主题" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物料清单编号：">
                        <el-input v-model="formData.code" placeholder="保存后自动生成" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="制单人员：">
                        <el-input v-model="formData.creator" value="admin" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注：">
                <el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="请输入备注" />
            </el-form-item>
        </el-form>

        <!-- 父件信息 -->
        <el-form :model="parentInfo" label-width="120px" class="form-section">
            <h3 class="section-title">父件信息</h3>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="产品名称：">
                        <el-input v-model="parentInfo.productName" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品编码：">
                        <el-input v-model="parentInfo.productCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="规格型号：">
                        <el-input v-model="parentInfo.spec" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="单位：">
                        <el-input v-model="parentInfo.unit" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="*数量：">
                        <el-input-number v-model="parentInfo.quantity" :min="1" :step="1" :controls="false" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品角色：">
                        <el-select v-model="parentInfo.role">
                            <el-option label="自制" value="self-made" />
                            <!-- 可扩展其他选项 -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="工艺流程：">
                        <el-input v-model="parentInfo.process" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="耗损率（%）：">
                        <el-input-number v-model="parentInfo.lossRate" :precision="2" :step="0.1" :min="0"
                            :controls="false" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 子件信息 -->
        <div class="form-section">
            <h3 class="section-title">子件信息</h3>
            <div class="table-actions">
                <el-button type="primary" @click="addRow">增行</el-button>
                <el-button @click="copyRow">复制行</el-button>
                <el-button @click="zoomTable">放大</el-button>
                <el-button @click="deleteRow">删行</el-button>
                <el-button @click="handleImport">导入</el-button>
                <el-button type="text" @click="downloadTemplate">导入模板</el-button>
            </div>

            <el-table :data="childList" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" width="60">
                    <template #default="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column label="产品名称" prop="productName" />
                <el-table-column label="产品编号" prop="productCode" />
                <el-table-column label="规格型号" prop="spec" />
                <el-table-column label="单位" prop="unit" width="100" />
                <el-table-column label="产品比例" prop="ratio" />
                <el-table-column label="*数量" prop="quantity" />
                <el-table-column label="*产品角色" prop="role">
                    <template #default>
                        <el-select v-model="parentInfo.role" size="mini">
                            <el-option label="自制" value="self-made" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="工艺流程" prop="process" />
                <el-table-column label="耗损率（%）" prop="lossRate" />
                <el-table-column label="领料方式" prop="pickMethod" />
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="操作" width="80">
                    <template #default="scope">
                        <el-button size="mini" type="text" @click="deleteRow(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 附件上传 -->
        <div class="form-section">
            <h3 class="section-title">附件</h3>
            <el-upload class="upload-demo" action="#" multiple :limit="10" :file-list="fileList"
                :on-success="handleUploadSuccess">
                <el-button type="primary">批量上传</el-button>
            </el-upload>

            <el-table :data="fileList" style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="文件名称" />
                <el-table-column prop="size" label="文件大小" width="120" />
                <el-table-column prop="uploader" label="上传人" width="120" />
                <el-table-column prop="time" label="上传时间" width="180" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 表单数据
const formData = ref({
    title: '',
    code: '',
    creator: 'admin',
    remark: ''
})

// 父件信息
const parentInfo = ref({
    productName: '',
    productCode: '',
    spec: '',
    unit: '',
    quantity: 1,
    role: 'self-made',
    process: '',
    lossRate: 0
})

// 子件表格数据（初始化10行）
const childList = ref(Array.from({ length: 10 }, (_, i) => ({
    productName: '',
    productCode: '',
    spec: '',
    unit: '',
    ratio: '',
    quantity: '',
    role: 'self-made',
    process: '',
    lossRate: '',
    pickMethod: '',
    remark: ''
})))

// 文件列表
const fileList = ref([])

// 操作方法
const addRow = () => {
    childList.value.push({
        productName: '',
        productCode: '',
        spec: '',
        unit: '',
        ratio: '',
        quantity: '',
        role: 'self-made',
        process: '',
        lossRate: '',
        pickMethod: '',
        remark: ''
    })
}

const deleteRow = (index) => {
    childList.value.splice(index, 1)
}

const handleImport = () => {
    /* 导入逻辑 */
}

const downloadTemplate = () => {
    /* 模板下载 */
}

const handleUploadSuccess = (response, file) => {
    fileList.value.push({
        name: file.name,
        size: `${(file.size / 1024).toFixed(2)}KB`,
        uploader: 'admin',
        time: new Date().toLocaleString()
    })
}
</script>

<style scoped>
.bom-container {
    padding: 20px;
    background: #fff;
}

.top-actions {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.top-actions .el-button {
    margin-right: 10px;
}

.form-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.section-title {
    color: #303133;
    margin: -10px 0 20px -10px;
    padding-left: 10px;
    font-size: 16px;
    border-left: 4px solid #409eff;
}

.table-actions {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.el-form-item {
    margin-bottom: 18px;
}

.el-input-number--mini {
    width: 100%;
}
</style>